<html>

<head>
  <title>戊泠众抽奖</title>
  <link rel="stylesheet" href="./index.css">
  <style>
    html {
      background-color: #F2F6FC;
      font-family: 'Microsoft YaHei';
    }

    .container {
      width: 800px;
      margin: 100px auto 0;
      background-color: #fff;
      padding: 20px 150px 20px;
      box-sizing: border-box;
      position: relative;
    }

    .logo {
      width: 50px;
      border-radius: 50%;
      overflow: hidden;
      vertical-align: middle;
      cursor: pointer;
    }

    h1 {
      text-align: center;
      color: #33333f;
    }

    .time {
      color: #67C23A;
      font-size: 22px;
      text-align: center;
    }

    .result {
      text-align: center;
      font-size: 26px;
      color: #F56C6C;
      white-space: pre-wrap;
    }

    .el-form {
      width: 33%;
      margin: 0 auto;
    }

    .el-input {
      width: 80px;
    }

    .weight {
      font-weight: bold;
      color: black;
    }

    .el-message-box__message {
      text-align: center;
    }

    main {
      text-align: center;
    }

    .tip {
      position: absolute;
      left: 0;
      top: 0;
      background-color: #f0f9eb;
      color: #67c23a;
      font-size: 12px;
      padding: 5px 10px;
      margin: 0;
      cursor: pointer;
    }

    .clear {
      margin: 10px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container">
      <p class="tip"  @click="initAudit">速速关注B站UP@戊泠人捕鱼为业(点我播放up最新力作！)</p>
      <h1>
        <img class="logo" src="./logo.jpg" alt="戊泠" @click="showHistory">
        戊泠众抽奖
      </h1>
      <el-divider></el-divider>
      <p class="time">{{nowDate}}</p>
      <el-divider></el-divider>
      <main>
        <el-form label-width="80px">
          <el-form-item label="吹水人数">
            <el-input v-model="max" type="tel"></el-input>
          </el-form-item>
          <el-form-item label="获奖人数">
            <el-input v-model="limit" type="tel"></el-input>
          </el-form-item>
        </el-form>
        <el-button class="submit" type="primary" round @click="handleStart">开始吧！</el-button>
    </div>

    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" size="40%">
      <el-table :data="historyResult" height="400">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="result" label="结果" width="180">
        </el-table-column>
      </el-table>
      <el-button type="danger" class="clear" @click="handleClear">清空历史</el-button>
    </el-drawer>
  </div>
</body>
<script src="./vue.js"></script>
<script src="./index.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        min: 0,
        max: 201,
        limit: 3,
        nowDate: '',
        result: [],
        historyResult: [],
        drawer: false
      }
    },
    created() {
      this.initTimer()
    },
    methods: {
      initAudit() {
        const music = new Audio('WhosTheBest.wav');
        music.play();
        music.loop = true;
      },
      initHistory() {
        const history = localStorage.getItem('historyResult')
        if (history) {
          this.historyResult = JSON.parse(history)
        }
      },
      initTimer() {
        setInterval(() => {
          this.nowDate = `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')} ${String(new Date().getHours()).padStart(2, '0')}:${String(new Date().getMinutes()).padStart(2, '0')}:${String(new Date().getSeconds()).padStart(2, '0')}`;
        }, 1000)
      },
      showHistory() {
        this.initHistory()
        this.drawer = true
      },
      handleClear() {
        localStorage.clear()
        this.historyResult = []
      },
      handleStart() {
        const { min, max } = this;
        this.result = [];

        while (this.result.length < this.limit) {
          const randomIndex = Math.floor(Math.random() * (max - min)) + min;
          if (!this.result.includes(randomIndex)) {
            this.result.push(randomIndex);
          }
        }
        let history = localStorage.getItem('historyResult')
        if (history) {
          history = JSON.parse(history)
          history.unshift({
            date: this.nowDate,
            result: this.result.join(',')
          })
        } else {
          history = [{
            date: this.nowDate,
            result: this.result.join(',')
          }]
        }
        localStorage.setItem('historyResult', JSON.stringify(history))
        this.$alert(
          `<h3>让我们恭喜这几个<i class="weight">B</i> 站用户！<h3 class="result">${this.result.join('\n\n')}</h3></h3>`,
          `抽奖结果`,
          {
            dangerouslyUseHTMLString: true
          }
        )
      }
    }
  })
</script>

</html>